<template>
    <div>
        <search style='position: fixed; top: 0;z-index: 2 ;' :isShow= 'isShow' backgroundColor= 'c-complete-bg' @handleSearch = '$_handleSearch' />
        <div class='container'>
            <div class='top-el' >

                <!--<div class='header' >
                    <img src = '~@/assets/images/bg.png'>
                </div>-->

                <mt-swipe class='ptb10' :auto="4000">
                    <mt-swipe-item><img class='swiper-img' src = '~@/assets/images/bg.png'></mt-swipe-item>
                    <mt-swipe-item><img  class='swiper-img'  src = '~@/assets/images/bg.png'></mt-swipe-item>
                    <mt-swipe-item><img  class='swiper-img'  src = '~@/assets/images/bg.png'></mt-swipe-item>
                </mt-swipe>

            </div>
            <div class='list-el' >


                <template v-for='(coupon, key) in couponList'>
                    <div class='coupon-card-wrap'>
                        <div class='header-image'>

                        </div>
                        <div class='header b_FS-36' >
                            <!--<p>【 特步 】夏季新品男鞋运动鞋</p>-->
                            <p>{{ coupon.name }} </p>
                        </div>

                        <div class='content ' >
                            <div class='coupon-img' >
                                <img :src='coupon.img'>
                            </div>

                            <div class='menu'>
                                <p class='menu-item c-taobao'><v-icon name='erweima c-taobao' size='36'  ></v-icon> <span>二维码</span></p>
                                <p class='menu-item c-taobao'><v-icon name='fuzhilianjie c-taobao' size='30' ></v-icon> <span>复制链接</span></p>
                                <p style='padding-left: 0' class='menu-item c-taobao' @click='getConvert(coupon)' ><v-icon name='iconfontzhizuobiaozhun0256 c-taobao' size='50'></v-icon> <span>领取优惠券</span></p>
                            </div>

                            <div class='detail text-left ptb10 plr10'>
                                {{ coupon.detail }}
                            </div>
                            <div class="coupon-desc text-left" >
                                <p class='now-money text-left c-minorText b_FS-22'>现价：{{ coupon.price.toFixed(2) }}元</p>
                                <p class='price-wrap text-left b_FS-0' >
                                    <span class='price-desc b_FS-24'>已售</span>
                                    <span class='price-num b_FS-24'>{{ coupon.sales }}张</span>
                                </p>
                                <p class='coupon-money text-left text-left'>优惠后：<span class='c-taobao b_FS-32'  >{{ coupon.coupon.toFixed(2) }}元</span></p>
                            </div>
                            <div class='text-right plr20 ptb10  c_white-bg' >
                                <span class='c-taobao'> 店铺：</span>{{ coupon.shop }}
                            </div>

                        </div>

                        <div class='bottom'></div>
                    </div>
                </template>


                <!--<template v-for='(coupon, key) in couponList'>
                    <div class='coupon-card-container'><img class='image' :src = 'coupon.img'><div class='desc'>
                           {{ coupon.detail }}
                        </div>
                        <p>  </p>
                        <div class='bottom'>
                            <span> 已售{{ coupon.sales }}张 </span>
                            <p><span>优惠 ¥{{ coupon.coupon }} 元</span></p>
                            <p>商铺：{{ coupon.shop }}</p>
                            <p></p>
                        </div>
                        <div class='menu' >
                            <button>二维码</button>
                            <button @click='copyUrl'>复制链接</button>
                        </div>
                    </div>
                </template>-->

            </div>


        </div>


        <input ref='copy' style='opacity: 0 ' v-model='copyStr'>
        <div v-if="hasMore" class="text-center  c_placeholder c_white-bg b-TB-20 ptb10" >
            加载中...
        </div>

        <mt-popup
                v-model="popupVisible"
                popup-transition="popup-fade">
            <img :src='currentCoupon' >
        </mt-popup>
    </div>


</template>
<script>
    import Vue from 'vue'
    import { Swipe, SwipeItem, Lazyload, Toast, Popup } from 'mint-ui';
    import search from '@/components/search' // 搜索框
    Vue.component(Popup.name, Popup);

    Vue.component(Swipe.name, Swipe);
    Vue.component(SwipeItem.name, SwipeItem);
    Vue.use(Lazyload);

    export default{
        data(){
            return{
                isShow: false ,
                currentCoupon : '' ,
                popupVisible: false ,
                couponList :  [
                    /*{
                        id: '1',
                        name : 'taobao coupon' , // 宝贝名称
                        img: 'http://img5.imgtn.bdimg.com/it/u=85734569,2537822262&fm=27&gp=0.jpg' , // 宝贝图片
                        price : '10' , // 价钱
                        sales : 10 , // 已售数量
                        coupon : 40 , //  优惠金额
                        shop : '一起sb' ,// 商铺
                        detail : '淘宝dddddd' ,// 宝贝详情
                    } */
                ] ,
                keyword : '' ,
                page : {
                    size: 5,
                    page : 1
                },
                hasMore : true ,
                copyStr : ''
            }
        },
        components:{
            search
        },
         mounted(){
            this.isShow = true
            // 滚动加载监控
            document.addEventListener('scroll',this.isToBottom)
        },
        //视图销毁前
        beforeDestroy(){
              // 去除滚动加载监控
             document.removeEventListener('scroll', this.isToBottom)
        },
        methods:{
            $_handleSearch(searchKey){
                console.log(2222, searchKey)
                this.keyword = searchKey
                this.hasMore = true
                this.$_searchForKey()
            },
             // 滚动加载
            isToBottom(e){
                  event.stopPropagation()
                  const BodyEl = document.documentElement
                  const Body = document.body
                  let outH = Body.scrollHeight,
                  currentH = BodyEl.offsetHeight,
                  offH = Body.scrollTop
                  if(currentH + offH == outH && this.hasMore ){
                    this.$_couponList()
                  }
                  else{
                    return false
                  }
            },
            async $_searchForKey () {
                // clear data in  page & couponList
                this.$_resetPage()
                this.page = {
                    size: 5,
                    page : 1
                }
                this.$_couponList()
            },
            async $_couponList () {
                if( !this.hasMore ) {
                    return
                }
                //this.hasMore = false
                let params = {
                    keyword: this.keyword,
                    ...this.page
                };

                let res = await this.$post('/api/search', params ).catch( res=>{
                  Toast( res )
                })
                if( res ){
                    this.page.page += 1
                    let data = res.data.goods
                    if( data.length ){
                        this.hasMore = true
                        var old = this.couponList
                         this.couponList = old.concat(data)
                    }
                    else{
                        this.hasMore = false
                    }
                }
            },
            async $_resetPage() {
                this.page = {
                    size: 5,
                    page : 1
                }
                this.couponList = []
            },
            async $_qrcode (link) {
                let params = {
                    link: link
                }
                let res = await this.$post('/api/qrcode', params).catch(res=>{
                    Toast(res.msg)
                })
                if( res ) {
                    Toast('复制成功')
                }
            },
             copyUrl(){
                  // v-model 复制失效
                  this.$refs.copy.value = 'abcddddddd'
                  // 获取dom
                  let dom = this.$refs.copy
                  console.log( dom )
                  // 选中dom 的value
                  dom.select(); // 选择对象
                  // 复制操作
                  document.execCommand("Copy");
             },
             async getConvert(coupon){
             console.log(coupon)
                  let res = await this.$post('/api/convert',{
                    type: 'wx' ,
                    image: coupon.img ,
                    item: String(coupon.id) , // id
                    title :  coupon.name
                  })
                  if( res ){
                    this.currentCoupon = res.data.tlink
                    this.popupVisible = true
                  }
                  console.log(res)
             }

        }
    }
</script>
<style lang='scss' scoped>
    .container{
        display: flex;
        justify-content: center;
        justify-items: center;
        margin: 0 ;
        flex-direction: column;
        overflow-y: auto ;
        min-height: 100vh ;
        position: relative;
        z-index: 1 ;
        .header{
            text-align: center;
            margin-top: 50px;

            >img{
                width: 600px ;
            }
        }
        .swiper-img{
            width: 100%;
            height: 100%;
        }
        .top-el {
            /*height: 497px;*/
            padding-top: 62px;
            width: 100%;

        }
        .list-el {
            flex: 1;
            /*display: flex;*/
            width: 100vw ;
            margin: auto;
            justify-content: center;

            position: relative;
            left: 0;
            > section {
                position: absolute;
            }

        }
    }

   image[lazy=loading] {
       width: 40px;
       height: 300px;
       margin: auto;
   }

   .coupon-card-wrap{
       position: relative;
       .header-image{
           width: 652px ;
           height: 50px ;
           margin: 0 auto ;
           background: url("~@/assets/images/coupon-content.png") 0 100% ;
           background-size: cover;
           transform: rotate(180deg);
       }
       .header{
           /*min-height: 226px ;*/
           background-color: #fff;
           width: 636px ;
           margin:auto;
           position: relative;
           z-index: 3;
           /*background: url("~@/assets/images/coupon-head2.png") 0 0 repeat-y ;*/
           background-size: cover;
           text-align: center;
           /*border-bottom: 1px solid #ff5000 ;*/
           >p{
               padding: 36px;
               border-bottom: 2px dashed #ff5000 ;
               /*padding-bottom : 100px ;*/
           }
       }
       .content{
           position: relative;
           z-index: 2;
           width: 636px ;
           min-height: 292px ;
           margin: 0 auto ;
           margin-top: -5px ;
           background-color: #fff;
           .menu{
               margin: 10px auto 0;

               display: flex;
               justify-items: center;
               justify-content: center;
               align-items: center;
               .menu-item{
                   height: 50px;
                   display: flex;
                   align-items: center;
                   padding: 0 10px ;
                   border:1px solid #ff5000;
                   margin-right: 10px ;
                   >span{
                       margin-left:5px;
                   }
               }
           }
           .coupon-img{
               padding-top: 30px;
               img{
                   /*width: 300px ;*/
                   display: block;
                   max-width: 630px ;
                   margin: auto;
                   /*height: 250px;*/
               }

           }
           .coupon-desc{
               padding: 0px 60px ;
               .price-wrap{
                    display: inline-block;
                   .price-desc {
                       display: inline-block;
                       background-color: #ff5000;
                       color: #fff ;
                       padding: 7px 5px 5px ;
                       border: 2px solid #ff5000;

                   }
                   .price-num{
                        display: inline-block;
                        padding: 7px 5px 5px ;
                        border: 2px solid #ff5000;
                        color: #ff5000 ;
                   }
               }
               .coupon-money{
                   display: inline-block;
                   padding-top: 15px ;
                   padding-left: 10px;
               }
               .now-money{
                   padding-top: 15px ;
               }
           }

       }

       .bottom{
           width: 652px ;
           height: 50px ;
           margin: 0 auto ;
           background: url("~@/assets/images/coupon-content.png") 0 100%   ;
           background-size: cover;
       }
   }
    .detail {
        padding: 10px 40px ;
    }
   /*.coupon-card-container{
       width: 70% ;
       margin: auto ;
       text-align: center ;
       display: inline-block ;
       box-shadow: 5px 5px 10px #ccc ;
       border: 1px solid black ;
        >img{
            width: 100% ;
            margin: auto ;
        }
       .image{
          margin: auto ;
          width: 100% ;
       }
       .bottom{
           display: flex ;

       }
   }*/

</style>
